<template>
  <div class="entering">
    <header class="header">
      <div class="ui-width header-wrap">
        <span>商户入驻申请</span>
        <router-link to="./">
          <span>返回首页</span>
        </router-link>
      </div>
    </header>
    <div class="settled-progress">
      <el-steps :active="stepnum">
        <el-step
          v-for="item in stepobj"
          :key="item.id"
          :title="item.title"
          :description="item.description"
        ></el-step>
      </el-steps>
    </div>

    <div class="settled-basicinfo ui-width" v-if="stepnum==1">
      <header class="panel-head">
        填写基本信息
        <span>
          （带
          <em style="color:red">*</em>为必填，为了便于审核通过，请如实填写）
        </span>
      </header>
      <div class="shopInfo">
        <el-form ref="shopInfo" :rules="rules" :model="shopInfo" label-width="120px">
          <span class="h2title">客户信息--</span>
          <el-form-item label="商户名称：" prop="shopName">
            <el-input v-model="shopInfo.shopName" placeholder="请输入商户名称"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contact">
            <el-input v-model="shopInfo.contact" placeholder="请输入联系人姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input v-model="shopInfo.mobile" placeholder="请输入联系人电话"></el-input>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address">
            <el-tooltip class="item" effect="dark" content="点击右边图标选择地理定位" placement="top">
              <el-input clear="addinput" v-model="shopInfo.address" placeholder="请输入联系人电话"></el-input>
            </el-tooltip>
            <i class="el-icon-location" @click="openmap"></i>
          </el-form-item>
          <el-form-item label="经营品类：" required>
            <el-col :span="6">
              <el-form-item prop="cateI">
                <el-select v-model="shopInfo.cateI" placeholder="请选择">
                  <el-option
                    v-for="item in catelist"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">---</el-col>
            <el-col :span="6">
              <el-form-item prop="cateII">
                <el-select v-model="shopInfo.cateII" multiple size="medium" placeholder="请选择">
                  <el-option
                    v-for="item in ercate"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <span class="h2title">资质信息--</span>
          <el-form-item label="图片信息：" required>
            <ul class="imgul">
              <el-col :span="5">
                <el-form-item prop="licensePic" v-loading="loading">
                  <li class="imgli">
                    <p>1.营业执照</p>
                    <input type="file" name id="file_1" ref="licensePic" @change="getFile(1)">
                    <img class="addimg" :src="shopInfo.licensePic?shopInfo.licensePic:addimg" alt>
                    <div class="legend">点击上传营业执照</div>
                  </li>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="doorPic" v-loading="loading2">
                  <li class="imgli">
                    <p>2.卫生许可证</p>
                    <input type="file" name id="file_2" ref="doorPic" @change="getFile(2)">
                    <img class="addimg" :src="shopInfo.doorPic?shopInfo.doorPic:addimg" alt>
                    <div class="legend">点击上传卫生许可证</div>
                  </li>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="healthPic" v-loading="loading3">
                  <li class="imgli">
                    <p>3.门头照</p>
                    <input type="file" name id="file_3" ref="healthPic" @change="getFile(3)">
                    <img class="addimg" :src="shopInfo.healthPic?shopInfo.healthPic:addimg" alt>
                    <div class="legend">点击上传门头照</div>
                  </li>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="logoPic" v-loading="loading4">
                  <li class="imgli">
                    <p>4.logo</p>
                    <input type="file" name id="file_4" ref="logoPic" @change="getFile(4)">
                    <img class="addimg" :src="shopInfo.logoPic?shopInfo.logoPic:addimg" alt>
                    <div class="legend">点击上传logo</div>
                  </li>
                </el-form-item>
              </el-col>
            </ul>
            <span>
              <br>照片要求：
              <br>
            </span>
            <span>1.图片不大于1MB。
              <br>
            </span>
            <span>2.图片不得有水印、logo有其他网站信息。</span>
          </el-form-item>
          <span class="h2title">其它信息--</span>
          <el-form-item label="营业日：" required>
            <el-col :span="6">
              <el-form-item prop="openstart">
                <el-select v-model="shopInfo.openstart" placeholder="开始时间">
                  <el-option v-for="(item,index) in week" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">---</el-col>
            <el-col :span="6">
              <el-form-item prop="openend">
                <el-select v-model="shopInfo.openend" placeholder="结束时间">
                  <el-option v-for="(item,index) in week" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="营业时段：" required>
            <el-col :span="6">
              <el-form-item prop="date1">
                <el-time-picker
                  type="fixed-time"
                  placeholder="选择时间"
                  v-model="shopInfo.date1"
                  style="width: 100%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">
              <span @click="handday(1)" :class="istoday?'actday':''">今日</span>
              <span @click="handday(2)" :class="!istoday?'actday':''">次日</span>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="date2">
                <el-time-picker
                  type="fixed-time"
                  placeholder="选择时间"
                  v-model="shopInfo.date2"
                  style="width: 100%;"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="其它服务：">
            <el-select v-model="shopInfo.otherService" multiple size="medium" placeholder="请选择">
              <el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="1">
                  同意
                  <span @click="agreement">《享七商家服务协议》</span>
                </el-radio>
              </el-radio-group>
            </div>
            <el-button type="primary" @click="submitForm('shopInfo')">提交审核</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="settled-basicinfo ui-width" v-if="stepnum==2">
      <div class="review">
        <i class="el-icon-loading"></i>
        店铺入驻申请正在审核中....
        <br>
        <router-link to="/">
          <el-button type="primary">返回首页</el-button>
        </router-link>
      </div>
    </div>

    <div class="settled-basicinfo ui-width" v-if="stepnum==3">
      <div class="review">
        <div v-if="status==1">
          <i class="el-icon-success"></i>审核通过
          <br>
          <el-button type="primary" @click="handstatus(1)">登录商户中心</el-button>
        </div>
        <div v-if="status==2">
          <i class="el-icon-error"></i>审核失败
          <br>
          <el-button type="primary" @click="handstatus(2)">重新提交</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="享七商家服务协议" :visible.sync="dialogTableVisible">
      <iframe src="http://www.luhome.top/h5.html" frameborder="0"></iframe>
    </el-dialog>

    <el-dialog title="地图选点定位" :visible.sync="dialogmap" width="80%" top="1%">
      <Maptab v-on:getMapdata="getMapdata"></Maptab>
    </el-dialog>

    <bottomSynopsis></bottomSynopsis>
  </div>
</template>


<script>
import qs from "qs";
import { mapState, mapMutations } from "vuex";
import bottomSynopsis from "@/components/bottom/bottomSynopsis";
import Maptab from "@/components/public/map";
export default {
  name: "entering",
  data() {
    return {
      stepnum: 1,
      status: 2,
      addimg: "../../../../static/images/addimg.png",
      imageUrl: "",
      radio: 1,
      dialogTableVisible: false,
      dialogmap: false,
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      istoday: true,
      cateI: "",
      cateII: [],
      stepobj: [
        {
          id: 0,
          title: "填写基本信息",
          description: "请如实填写基本信息"
        },
        {
          id: 1,
          title: "提交审核",
          description: "工作人员会在1至2个工作日完成审核"
        },
        {
          id: 2,
          title: "查看审核结果",
          description: "查看审核结果"
        }
      ],
      week: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      ],
      options: ["停车场", "包间", "WIFI", "音乐"],
      ercate: [],
      catelist: [],
      shopInfo: {
        shopName: "",
        shoptype: "",
        Contact: "",
        mobile: "",
        cateI: "",
        HoursI: "",
        MinutesI: "",
        HoursII: "",
        MinutesII: "",
        cateII: [],
        category: [],
        address: "",
        openstart: "",
        openend: "",
        date1: "",
        date2: "",
        otherService: [],
        licensePic: "",
        doorPic: "",
        logoPic: "",
        smallLogoPic: "",
        healthPic: "",
        city: "",
        locationX: "",
        locationY: "",
        address: ""
      },
      rules: {
        shopName: [
          { required: true, message: "请输入商铺名称", trigger: "blur" }
        ],
        contact: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" }
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        address: [
          { required: true, message: "请选择或输入详情地址", trigger: "blur" }
        ],
        category: [
          { required: true, message: "请选择相应经营类别", trigger: "change" }
        ],
        licensePic: [
          {
            required: true,
            message: "请选择营业执照图片上传",
            trigger: "change"
          }
        ],
        doorPic: [
          {
            required: true,
            message: "请选择卫生许可证图片上传",
            trigger: "change"
          }
        ],
        healthPic: [
          { required: true, message: "请选择门头照图片上传", trigger: "change" }
        ],
        logoPic: [
          { required: true, message: "请选择logo图片上传", trigger: "change" }
        ],
        cateI: [
          {
            required: true,
            message: "请选择经营分类一级类别",
            trigger: "change"
          }
        ],
        cateII: [
          {
            required: true,
            message: "请选择经营分类二级类别",
            trigger: "change"
          }
        ],
        openstart: [
          { required: true, message: "请选择营业日开始时间", trigger: "change" }
        ],
        openend: [
          { required: true, message: "请选择营业日结束时间", trigger: "change" }
        ],
        date1: [
          {
            required: true,
            message: "请选择营业时段结束时间",
            trigger: "change"
          }
        ],
        date2: [
          {
            required: true,
            message: "请选择营业时段结束时间",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {
    "shopInfo.cateI": {
      handler: function() {
        for (let i in this.catelist) {
          if (this.shopInfo.cateI == this.catelist[i].id) {
            this.shopInfo.cateII = [];
            this.ercate = this.catelist[i].children;
          }
        }
      }
    },
    "shopInfo.cateII": {
      handler: function() {
        if (this.shopInfo.cateII.length > 3) {
          this.shopInfo.cateII.pop();
          this.$message.error("最多选择三个");
        }
      }
    },
    "shopInfo.date1": {
      handler: function() {
        let myDate = new Date(this.shopInfo.date1);
        // myDate.getHours();
        this.shopInfo.HoursI = myDate.getHours();
        this.shopInfo.MinutesI = myDate.getMinutes();
      }
    },
    "shopInfo.date2": {
      handler: function() {
        let myDate = new Date(this.shopInfo.date2);
        this.shopInfo.HoursII = myDate.getHours();
        this.shopInfo.MinutesII = myDate.getMinutes();
      }
    }
  },
  computed: {
    ...mapState(["token", "userId", "userInfo"])
  },
  components: {
    bottomSynopsis,
    Maptab
  },
  methods: {
    //初始化
    init() {
      this.queryreview();
      // this.getcategory();
    },
    //查询当前审核进度
    queryreview() {
      this.$axios({
        url: "/api/website/shopEnter/searchByUserId?userId=" + this.userId,
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        if (res.data.code == 0) {
          if (res.data.data && res.data.data.id) {
            if (res.data.data.status == 0) {
              this.stepnum = 2;
            } else if (res.data.data.status == 1 || res.data.data.status == 2) {
              this.stepnum = 3;
            }
            this.status = res.data.data.status;
          } else {
            this.stepnum = 1;
            this.getcategory();
          }
        }
      });
    },
    //审核结果操作
    handstatus(val) {
      if (val == 1) {
        //商户中心
        this.$router.push("./shopmenu");
      } else if (val == 2) {
        //重新提交
        this.stepnum = 1;
        this.status = 1;
        this.getcategory();
      }
    },
    //获取分类信息
    getcategory() {
      this.$axios({
        url: "/api/app/shopCategory/list",
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          this.catelist = res.data.data;
        }
      });
    },
    //图片上传
    getFile(val) {
      let inputDOM = {},
        file = {},
        form = new FormData(),
        _this = this;
      if (val == 1) {
        this.loading = true;
        inputDOM = this.$refs.licensePic;
      } else if (val == 2) {
        this.loading2 = true;
        inputDOM = this.$refs.doorPic;
      } else if (val == 3) {
        this.loading3 = true;
        inputDOM = this.$refs.healthPic;
      } else if (val == 4) {
        this.loading4 = true;
        inputDOM = this.$refs.logoPic;
      }
      file = inputDOM.files[0];
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
        return;
      }
      form.append("file", file);
      form.append("userName", "13971489895");
      this.$axios
        .post("api/img/uploadMp4", form, {
          headers: {
            Authorization: this.token
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            if (res.data.data.picUrl) {
              if (val == 1) {
                _this.loading = false;
                _this.shopInfo.licensePic = res.data.data.picUrl;
              } else if (val == 2) {
                _this.loading2 = false;
                _this.shopInfo.doorPic = res.data.data.picUrl;
              } else if (val == 3) {
                _this.loading3 = false;
                _this.shopInfo.healthPic = res.data.data.picUrl;
              } else if (val == 4) {
                _this.loading4 = false;
                _this.shopInfo.logoPic = res.data.data.picUrl;
                _this.shopInfo.smallLogoPic = res.data.data.smallPicUrl;
              }
            }
          }
        });
    },
    //显示模态框
    agreement() {
      this.dialogTableVisible = true;
    },
    //选择 今日/次日
    handday(val) {
      if (val == 1) {
        this.istoday = true;
      } else {
        this.istoday = false;
      }
    },
    //打开地图
    openmap() {
      this.dialogmap = true;
    },
    //提交前校验
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          this.saveshop();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //保存提交列表
    saveshop() {
      let _parms = {},
        _value = "",
        _shopHours = "",
        _istoday = "",
        _Cate = "",
        _Url = "/api/website/shopEnter/add";
      _istoday = this.istoday ? "" : "次日";
      _shopHours =
        this.shopInfo.openstart +
        "至" +
        this.shopInfo.openend +
        "," +
        this.shopInfo.HoursI +
        ":" +
        this.shopInfo.MinutesI +
        "至" +
        _istoday +
        this.shopInfo.HoursII +
        ":" +
        this.shopInfo.MinutesII;
      for (let i in this.shopInfo.cateII) {
        _Cate += this.shopInfo.cateI + "-" + this.shopInfo.cateII[i] + "|";
      }
      _Cate = _Cate.substring(0, _Cate.length - 1);
      _parms = {
        licensePic: this.shopInfo.licensePic,
        doorPic: this.shopInfo.doorPic,
        mobile: this.shopInfo.mobile,
        locationY: this.shopInfo.locationY,
        logoPic: this.shopInfo.licensePic,
        shopCate: _Cate,
        healthPic: this.shopInfo.healthPic,
        shopHours: _shopHours,
        smallLogoPic: this.shopInfo.licensePic,
        userName: this.userInfo.userName,
        address: this.shopInfo.address,
        city: this.shopInfo.city,
        shopName: this.shopInfo.shopName,
        otherService: this.shopInfo.otherService.join(","),
        locationX: this.shopInfo.locationX
      };
      this.$axios
        .post("/api/app/shopEnter/add", qs.stringify(_parms), {
          headers: {
            Authorization: this.token
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$message.success("提交成功，请等待审核");
          } else {
            this.$message(res.data.message);
          }
        })
        .catch(err => {
          this.$message("系统繁忙请稍后再试");
        });
    },
    //处理地图返回信息
    getMapdata: function(data) {
      this.shopInfo.city = data.addressComponents.city;
      this.shopInfo.locationX = data.location.lng;
      this.shopInfo.locationY = data.location.lat;
      let _address = data.addressComponents;
      let _town = _address.town ? _address.town : "";
      let _streetNumber = _address._streetNumber ? _address._streetNumber : "";
      this.shopInfo.address =
        _address.province +
        "-" +
        _address.city +
        "-" +
        _address.district +
        "-" +
        _address.street +
        "-" +
        _town +
        "-" +
        _streetNumber;
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="less">
.entering {
  .header {
    background: #ff2d4b;
    height: 50px;
    position: relative;
    .ui-width {
      width: 980px;
      margin: 0 auto;
    }
    span {
      color: #fff;
      font-size: 16px;
      margin-left: 30px;
      display: inline-block;
      line-height: 50px;
    }
  }
  iframe {
    width: 100%;
    height: 500px;
  }
  .settled-progress {
    width: 980px;
    margin: 0 auto;
    padding: 20px 15%;
  }
  .ui-width,
  .shopInfo {
    width: 980px;
    margin: 0 auto;
    .panel-head {
      background: #dedede;
      line-height: 40px;
      text-indent: 1em;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .h2title {
    font-size: 22px;
    padding: 5px 0;
    display: block;
    color: #409eff;
  }
  .imgli {
    width: 100%;
    height: 200px;
    margin: 0 0.5%;
    cursor: pointer;
    float: left;
    position: relative;
    p {
      text-align: center;
    }
    input {
      width: 95%;
      height: 80%;
      position: relative;
      opacity: 0;
      z-index: 2;
      cursor: pointer;
      background: url("../../../../static/images/addimg.png") no-repeat;
    }
    .addimg {
      width: 95%;
      height: 80%;
      margin-top: -200px;
      cursor: pointer;
    }

    .legend {
      position: relative;
      width: 95%;
      top: -80px;
      text-align: center;
      background: #bebebe;
      color: #fff;
      opacity: 0.9;
    }
  }
  .review {
    width: 100%;
    min-height: 300px;
    text-align: center;
    font-size: 40px;
    padding: 50px 0;
    color: #409eff;
  }
  .el-input {
    width: 90%;
  }
  .el-icon-location {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  .el-icon-location:before {
    width: 50px;
    height: 50px;
    color: #409eff;
  }
  .line {
    text-align: center;
    span {
      cursor: pointer;
    }
    .actday {
      color: #409eff;
    }
  }
}
</style>



